<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 分割线 -->
		<view style="width: 100%;height: 10rpx;background-color: #F7F8FF;"></view>
		<!-- 科目信息 -->
		<view style="width: 702rpx; display: flex;margin-top: 25rpx;">
			<image mode="aspectFill" src="../static/car.png" style="width: 100rpx;height: 100rpx;"></image>
			<text style="font-size: 30rpx;color: #333333;margin-left: 30rpx;">C1精品班（预约）</text>
		</view>
		
		<!-- 订单状态 -->
		<view style="width: 702rpx; display: flex;margin-top: 40rpx;">
			<view style="width: 1px;height: 28rpx;background-color: #3187FB;"></view>
			<text style="font-size: 28rpx;color: #333333;margin-left: 10rpx;line-height: 28rpx;">订单状态</text>
		</view>
		
		<!-- 分割线 -->
		<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"></view>
		<!-- 订单状态详情 -->
		<view style="width: 702rpx;height: 55rpx; display: flex;justify-content: space-between;align-items: center;font-size: 24rpx;"
		v-for="(item,index) in orderTime" :key="index">
			<text style="color: #666666;">{{item.title}}</text>
			<text style="color: #333333;">{{item.context}}</text>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 10rpx;background-color: #F7F8FF;margin-top: 10rpx;"></view>
		
		<!-- 订单信息 -->
		<view style="width: 702rpx; display: flex;margin-top: 40rpx;">
			<view style="width: 1px;height: 28rpx;background-color: #3187FB;"></view>
			<text style="font-size: 28rpx;color: #333333;margin-left: 10rpx;line-height: 28rpx;">订单信息</text>
		</view>
		<!-- 分割线 -->
		<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"></view>
		<!-- 订单信息详情 -->
		<view style="width: 702rpx;height: 55rpx; display: flex;justify-content: space-between;align-items: center;font-size: 24rpx;"
		v-for="(item,index) in orderText">
			<text style="width: 300rpx; color: #666666;">{{item.title}}</text>
			<text style="color: #333333;">{{item.context}}</text>
		</view>
		
		<!-- 订单金额 -->
		<view style="width: 702rpx; display: flex;margin-top: 40rpx;">
			<view style="width: 1px;height: 28rpx;background-color: #3187FB;"></view>
			<text style="font-size: 28rpx;color: #333333;margin-left: 10rpx;line-height: 28rpx;">订单金额</text>
		</view>
		<!-- 分割线 -->
		<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"></view>
		<!-- 订单金额详情 -->
		<view style="width: 702rpx;height: 55rpx; display: flex;justify-content: space-between;align-items: center;font-size: 24rpx;"
		v-for="(item,index) in orderPrice">
			<text style="width: 300rpx; color: #666666;">{{item.title}}</text>
			<text style="color: #333333;">{{item.context}}</text>
		</view>
		<!-- 分割线 -->
		<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"></view>
		<view style="width: 702rpx; display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
			<text style="font-size: 28rpx;color: #333333;">合计：</text>
			<text style="font-size: 28rpx;color: #333333;">￥270.00</text>
		</view>
		
		<view style="width: 100%;height: 80rpx;line-height: 80rpx;background-color: #3187FB;text-align: center;
		font-size: 28rpx;color: #FFFFFF;
		position: fixed;bottom: 0px;">支付定金</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderTime:[{
					title:'预约时间：',
					context:'2021-01-15 14:38:25'
				},
				{
					title:'取消时间：',
					context:'-'
				}],
				orderText:[{
					title:'预约人：',
					context:'小花'
				},
				{
					title:'联系电话',
					context:'13698656632'
				},
				{
					title:'预约科目',
					context:'C1驾照'
				},
				{
					title:'备注',
					context:'我是备注'
				}],
				orderPrice:[{
					title:'总计：',
					context:'300.00'
				},
				{
					title:'预约折扣：',
					context:'30.00'
				},
				{
					title:'优惠券抵扣：',
					context:'0.00'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>
